<template>
	<div class="comment-page">
		<h1 class="page-title">歌曲评论</h1>
		<div class="song-info">
			<img src="https://picsum.photos/200/200?random=1" alt="歌曲封面" class="song-cover" />
			<div class="song-details">
				<h2 class="song-title">晴天</h2>
				<p class="song-artist">周杰伦</p>
				<p class="song-stats">播放量: 1256.8万 | 评论数: 9.0万</p>
			</div>
		</div>
		<p class="comment-count">共 9.0万 条评论</p>
		<div class="comment-input">
			<textarea v-model="newComment" placeholder="写下你的评论..." class="comment-textarea"></textarea>
			<button @click="addComment" class="comment-submit">发布评论</button>
		</div>
		<div class="comment-list">
			<div v-for="(comment, index) in comments" :key="index" class="comment-item">
				<img :src="comment.avatar" alt="用户头像" class="user-avatar" />
				<div class="comment-content">
					<p class="user-name">{{ comment.username }}</p>
					<p class="comment-text">{{ comment.text }}</p>
					<p class="comment-time">{{ comment.time }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	// 引入Vue3 Composition API的ref（用于基本类型响应式）和reactive（用于复杂类型响应式）
	import {
		ref,
		reactive
	} from 'vue'

	// 基本类型响应式数据：新评论内容
	const newComment = ref('')

	// 固定数据：头像地址
	const myAvatar = "https://picsum.photos/100/100?random=2"
	const otherAvatars = [
		"https://picsum.photos/100/100?random=3",
		"https://picsum.photos/100/100?random=4"
	]

	// 复杂类型响应式数据：评论列表（用reactive包裹数组）
	const comments = reactive([{
			username: "用户2377",
			text: "前奏一响，爷青回！",
			time: "5分钟前",
			avatar: "https://picsum.photos/100/100?random=3"
		},
		{
			username: "音乐爱好者",
			text: "循环了无数遍，还是那么好听。",
			time: "1小时前",
			avatar: "https://picsum.photos/100/100?random=4"
		}
	])

	// 发布评论方法（直接定义，无需挂载到methods）
	const addComment = () => {
		// 清空空格后判断是否为空，空评论不发布
		if (newComment.value.trim() === "") return

		// 获取当前时间并格式化（时:分，补零处理）
		const now = new Date()
		const hours = now.getHours().toString().padStart(2, "0")
		const minutes = now.getMinutes().toString().padStart(2, "0")

		// 往评论列表头部添加新评论（reactive数组直接操作）
		comments.unshift({
			username: "我",
			text: newComment.value,
			time: `${hours}:${minutes}`,
			avatar: myAvatar
		})

		// 清空输入框（ref数据需通过.value修改）
		newComment.value = ""
	}
</script>

<style scoped>
	/* 样式与Vue2版本一致，scoped属性在Vue3中功能不变（样式隔离） */
	.comment-page {
		font-family: Arial, sans-serif;
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
	}

	.page-title {
		font-size: 24px;
		margin-bottom: 15px;
	}

	.song-info {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.song-cover {
		width: 100px;
		height: 100px;
		object-fit: cover;
		margin-right: 15px;
	}

	.song-details {
		flex: 1;
	}

	.song-title {
		font-size: 18px;
		margin-bottom: 5px;
	}

	.song-artist {
		color: #666;
		margin-bottom: 5px;
	}

	.song-stats {
		color: #999;
		font-size: 14px;
	}

	.comment-count {
		font-size: 16px;
		margin-bottom: 15px;
		color: #333;
	}

	.comment-input {
		margin-bottom: 20px;
	}

	.comment-textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		resize: vertical;
		min-height: 80px;
		margin-bottom: 10px;
	}

	.comment-submit {
		background-color: #007bff;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
	}

	.comment-submit:hover {
		background-color: #0056b3;
	}

	.comment-list {
		border-top: 1px solid #eee;
		padding-top: 15px;
	}

	.comment-item {
		display: flex;
		margin-bottom: 20px;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.comment-content {
		flex: 1;
	}

	.user-name {
		font-weight: bold;
		margin-bottom: 5px;
	}

	.comment-text {
		margin-bottom: 5px;
		line-height: 1.4;
	}

	.comment-time {
		color: #999;
		font-size: 12px;
	}
</style>